<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {getOrderInfo} from "@/api/order";
import {Status} from './constant'

@Component({
  name: 'platformOrder',
  methods: {
    Status:()=>Status
  }
})
export default class index extends Vue {

  private order_status:number = null
  private valueTime = []
  private shopName = ''
  private orderNumber:string = ''
  public pickerOptions = {
    shortcuts: [{
      text: '最近一周',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
      }
    }]
  }
  private orderInfo = []
  private currentPage = 1
  private pageSizes = [3,5,7,9,11]
  private pageSize = 5
  private total = 0

  @Watch('valueTime')
  onChangeValue(newVal:string[]){
    console.log(newVal)
  }

  created() {
    this.getOrderInfo()
  }

  async getOrderInfo(pager=1) {
    this.currentPage = pager
    const {data} = await getOrderInfo({
      page:this.currentPage,
      pageSize:this.pageSize,
      shopName:this.shopName,
      number:this.orderNumber,
      beginTime:this.valueTime[0]||'',
      endTime:this.valueTime[1]||'',
      status:this.order_status
    })
    if(data.code===1) {
      this.orderInfo = data.data.records
      console.log(data)
      this.total = data.data.total
    }
  }

  async handleSizeChange(newPageSize:number){
    this.pageSize = newPageSize
    await this.getOrderInfo()
  }

  async handleCurrentChange(newPage:number){
    this.currentPage = newPage
    await this.getOrderInfo(this.currentPage)
  }
}
</script>

<template>
  <el-card class="card">
    <el-form :inline="true">
      <el-form-item label="商家名称:">
        <el-input v-model="shopName" placeholder="请填写商家名称" style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item label="订单号:">
        <el-input v-model="orderNumber" style="width: 150px" placeholder="请填写订单号"></el-input>
      </el-form-item>
      <el-form-item label="下单时间:" style="width: 350px">
        <div style="display:inline-block;width: 100%;">
          <el-date-picker
            v-model="valueTime"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            align="right"
            unlink-panels
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 250px;margin-left: 10px;"/>
        </div>
      </el-form-item>
      <el-form-item label="订单状态:" style="margin-right: 40px">
        <el-select v-model="order_status" placeholder="请选择状态">
          <el-option v-for="(item, index) in Status()" :key="index" :value="index===0?null:index" :label="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getOrderInfo()" type="primary" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="orderInfo">
      <el-table-column align="center" label="商家名称" prop="shopName"></el-table-column>
      <el-table-column align="center" sortable label="订单号" prop="number"></el-table-column>
      <el-table-column align="center" label="订单状态">
        <template v-slot="{row}">
          <span>{{Status()[row.status]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名" prop="userName"></el-table-column>
      <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
      <el-table-column align="center" label="地址" prop="address"></el-table-column>
      <el-table-column align="center" sortable label="下单时间" prop="orderTime"></el-table-column>
      <el-table-column label="实收金额">
        <template v-slot="{row}">
          <span>￥{{row.amount}}元</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   background
                   :hide-on-single-page="total===0"
                   :current-page="currentPage"
                   :page-sizes="pageSizes"
                   :page-size="pageSize"
                   class="userList"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :total="total"
                   style="margin-top: 20px;text-align: center"
    ></el-pagination>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  margin: 20px;
}
</style>
